import QtQuick
import QtQuick.Controls

Item {
    id: root
    width: 400
    height: 100

    // 公共属性
    property string text: "GLITCH"
    property real speed: 1.0
    property bool enableShadows: true
    property bool enableOnHover: false
    property string fontFamily: "Cyberpunk"
    property int fontSize: 72
    property color textColor: "white"
    property color backgroundColor: "#060606"

    // 私有属性
    property int _glitchFrameIndex: 0
    property bool _isMouseOver: false
    property rect _clipRectAfter: Qt.rect(0, 0, width, height)
    property rect _clipRectBefore: Qt.rect(0, 0, width, height)
    property list<rect> _clipKeyframes: []

    // 初始化
    Component.onCompleted: {
        _updateClipKeyframes()
        if (!enableOnHover) {
            _startGlitchAnimation()
        }
    }

    // 文本测量
    TextMetrics {
        id: textMetrics
        font.family: root.fontFamily
        font.pixelSize: root.fontSize
        text: root.text
    }

    // 定时器用于损坏动画
    Timer {
        id: glitchTimer
        interval: 30
        repeat: true
        onTriggered: {
            if (_clipKeyframes.length === 0) {
                _updateClipKeyframes()
            }

            if (_clipKeyframes.length > 0) {
                var margins = _clipKeyframes[_glitchFrameIndex]

                var clipY = (height * margins.y) / 100
                var clipHeight = height - clipY - (height * margins.height) / 100

                _clipRectAfter = Qt.rect(0, clipY, width, clipHeight)
                _clipRectBefore = Qt.rect(0, clipY, width, clipHeight)

                _glitchFrameIndex = (_glitchFrameIndex + 1) % _clipKeyframes.length
            }
        }
    }

    // 背景
    Rectangle {
        anchors.fill: parent
        color: root.backgroundColor
    }

    // 主文本
    Text {
        id: mainText
        text: root.text
        font.family: root.fontFamily
        font.pixelSize: root.fontSize
        font.weight: Font.Black
        color: root.textColor
        anchors.centerIn: parent
    }

    // 损坏效果层 (红色偏移)
    Text {
        id: afterText
        text: root.text
        font: mainText.font
        color: "red"
        anchors.centerIn: parent
        x: mainText.x - 10
        visible: !root.enableOnHover || (root.enableOnHover && root._isMouseOver)
        clip: true

        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "transparent"
            clip: true
            layer.enabled: true

            children: [
                Text {
                    text: parent.parent.text
                    font: parent.parent.font
                    color: parent.parent.color
                    x: 10
                    y: parent.parent.y
                }
            ]
        }
    }

    // 损坏效果层 (青色偏移)
    Text {
        id: beforeText
        text: root.text
        font: mainText.font
        color: "cyan"
        anchors.centerIn: parent
        x: mainText.x + 10
        visible: !root.enableOnHover || (root.enableOnHover && root._isMouseOver)
        clip: true

        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "transparent"
            clip: true
            layer.enabled: true

            children: [
                Text {
                    text: parent.parent.text
                    font: parent.parent.font
                    color: parent.parent.color
                    x: -10
                    y: parent.parent.y
                }
            ]
        }
    }

    // 鼠标区域用于悬停效果
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            root._isMouseOver = true
            if (root.enableOnHover) {
                root._startGlitchAnimation()
            }
        }
        onExited: {
            root._isMouseOver = false
            if (root.enableOnHover) {
                root._stopGlitchAnimation()
            }
        }
    }

    // 更新裁剪关键帧
    function _updateClipKeyframes() {
        _clipKeyframes = [
            Qt.rect(0, 20, 0, 50),
            Qt.rect(0, 10, 0, 60),
            Qt.rect(0, 15, 0, 55),
            Qt.rect(0, 25, 0, 35),
            Qt.rect(0, 30, 0, 40),
            Qt.rect(0, 40, 0, 20),
            Qt.rect(0, 10, 0, 60),
            Qt.rect(0, 15, 0, 55),
            Qt.rect(0, 25, 0, 35),
            Qt.rect(0, 0, 0, 40),
            Qt.rect(0, 20, 0, 50),
            Qt.rect(0, 10, 0, 60),
            Qt.rect(0, 15, 0, 55),
            Qt.rect(0, 25, 0, 35),
            Qt.rect(0, 30, 0, 111),
            Qt.rect(0, 40, 0, 20),
            Qt.rect(0, 20, 0, 50),
            Qt.rect(0, 10, 0, 60),
            Qt.rect(0, 15, 0, 55),
            Qt.rect(0, 25, 0, 35),
            Qt.rect(0, 30, 0, 40)
        ]
    }

    // 设置动画
    function _setupAnimations() {
        _updateClipKeyframes()
        var totalAfterDurationMs = speed * 3000
        glitchTimer.interval = totalAfterDurationMs / _clipKeyframes.length
    }

    // 开始损坏动画
    function _startGlitchAnimation() {
        if (!glitchTimer.running) {
            _glitchFrameIndex = 0
            glitchTimer.start()
        }
    }

    // 停止损坏动画
    function _stopGlitchAnimation() {
        if (glitchTimer.running) {
            glitchTimer.stop()
            _clipRectAfter = Qt.rect(0, 0, width, height)
            _clipRectBefore = Qt.rect(0, 0, width, height)
        }
    }

    // 属性变化处理
    onSpeedChanged: {
        _setupAnimations()
        if (!enableOnHover && glitchTimer.running) {
            _startGlitchAnimation()
        } else if (enableOnHover && _isMouseOver) {
            _startGlitchAnimation()
        }
    }

    onEnableOnHoverChanged: {
        if (enableOnHover) {
            _stopGlitchAnimation()
        } else {
            _startGlitchAnimation()
        }
    }

    onWidthChanged: _setupAnimations()
    onHeightChanged: _setupAnimations()
}
